<template>
    <div class="bi-icon" :class="iconClass" :style="iconStyle">
        <img :src="data"  v-if="!loading && image" />
    </div>
</template>

<script>
export default {
    name: 'bi-icon',
    data() {

        let isImage = (url) =>{
            //判断扩展名是否是图片
            imageExt = ['jpg','jpeg','png','gif','bmp','svg'];
            let re = false;
            imageExt.forEach(element => {
                if (url.substr(url.lastIndexOf('.')+1) == element){
                    re = true;
                }
            });

            return re;
        }

        return {
            image:isImage(this.data),
        }
    },
    computed:{
        iconClass(){
            let classList = [];
            
            if (this.loading){
                classList.push('fa-spin');
                classList.push('fa-spinner');
                classList.push('fa');
                return classList;
            }

            if (this.data.indexOf('fa-')>=0){
                if (this.data.indexOf('fa')==this.data.lastIndexOf('fa')) classList.push('fa');
                classList.push(this.data);
            }

            if (this.image) classList.push('bi-icon-image');

            if (this.disabled){
                classList.push('disabled');
            }

            return classList;
        },
        iconStyle(){
            let style = {};

            if (this.size){
                style.width = parseInt(this.size)+'px';
                style.height = parseInt(this.size)+'px';

                if (this.data.indexOf('fa-')>0){
                    style.fontSize = parseInt(this.size)+'px';
                }
            }

            if (this.color) style.color = this.color;

            if (this.fontSize) style.fontSize = this.fontSize;

            if (this.style){
                for(let name in this.style ) style[name] = this.style[name];
            }

            return style;
        }        
    },
    props: {
        data: {
            type: String,
            default: ''
        },
        size: {
            type: [String,Number],
            default: ''
        },
        color: {
            type: String,
            default: ''
        },
        fontSize: {
            type: String,
            default: ''
        },
        style: {
            type: [String,Object],
            default: {}
        },
        loading:{
            type:Boolean,
            default:false
        },
        disabled:{
            type:Boolean,
            default:false
        }
    }
}
</script>

<style>
.bi-icon{
    min-width:14px;
    text-align: center;
}

.bi-icon.disabled{
    color: var(--bs-gray-300);
}

.bi-icon-image{
    width: 30px;
    height: 30px;
}
.bi-icon-image img{
    width:100%;
    height:100%;
}
</style>